<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子产品 | 售后</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header {
            width: 1250px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header .h-container {
            height: 100%;
            width: 323px;
            background-color: #ffc42a;
            transform: skewX(-20deg);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .h-container .hc-c {
            display: flex;
            transform: skewX(20deg);
            font-size: 12px;
        }

        .h-container .hc-c p {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .hc-c .h-c-img {
            width: 15px;
        }

        .header-nav {
            width: 1250px;
            font: 14px;
            color: #fff;
            background-size: 2px 100%;
            background-color: #2e2e2e;
            display: flex;
        }

        .header-nav p {
            height: 66px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            line-height: 66px;
        }

        .header-nav p:first-child {
            padding-left: 0px;
        }

        .header-nav p:hover {
            color: #ffc42a;
        }

        .header-tabs {
            height: 60px;
            line-height: 60px;
            font-size: 12px;
        }

        .container {
            width: 1250px;
            height: 867px;
            display: flex;
            box-sizing: border-box;
            overflow: hidden;
            justify-content: space-between;
        }

        .container .cc-left {
            width: 750px;
            padding-right: 120px;
            background-color: #fff;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .container .cc-right {
            background-color: #f4f8fb;
            flex: 1;
        }

        .cc-left .ccl-title {
            margin-top: 45px;
            margin-bottom: 28px;
            font-size: 30px;
            font-weight: 500;
            color: #2e2e2e;
        }

        .b-border {
            margin-top: 10px;
            width: 30px;
            border-bottom: 4px solid #ffc42a;
        }

        .cclt-con .con-1 {
            width: 590px;
            padding-bottom: 40px;
            padding-right: 20px;
            font-size: 16px;
            color: #555555;
            line-height: 30px;
        }

        .cclt-con .input {
            border: 1px solid rgb(232, 232, 232);
        }

        .cclt-con .textarea {
            width: 560px;
            height: 180px;
            border: 1px solid rgb(232, 232, 232);
        }

        .cclt-con .submit {
            padding: 14px 40px;
            background-color: #ffc32b;
            border: 1px solid rgb(232, 232, 232);
        }

        .container .cc-right {
            padding-top: 110px;
        }

        .container .cc-right img {
            width: 520px;
            transform: translateX(-60px);
        }

        .err {
            display: flex;
            align-items: center;
            justify-content: start;
            font-size: 12px;
            color: #fff;
            background-color: #D64A49;
            display: inline-block;
            padding: 3px 10px;
        }

        .err img {
            width: 12px;
            height: 12px;
            margin-right: 5px;
        }

        .input {
            width: 560px;
            height: 46px;
        }

        .footer {
            height: 336px;
            background-color: #f7f7f7;
            padding-top: 150px;
            padding-bottom: 150px;
            box-sizing: border-box;
        }

        .footer {
            width: 1250px;
            display: flex;
            justify-content: space-between;
            padding-top: 60px;
            box-sizing: border-box;
        }

        .f-top {
            margin-bottom: 20px;
        }

        .footer-1 .f-title {
            font-size: 24px;
            font-weight: 500;
            color: #000;
        }

        .footer-1 .f-content {
            font-size: 15px;
            color: #555555;
            margin-top: 20px;
        }

        .f-content p {
            margin-bottom: 10px;
        }

        .f-content2 {
            height: 90px;
            display: flex;
            align-items: center;
        }

        .f-content2 textarea {
            height: 100%;
        }

        .f-content2 button {
            height: 100%;
            background-color: #ffc42a;
            margin-left: 20px;
            padding-left: 10px;
            padding-right: 10px;
            border: none;
        }

        .color-1 {
            background-color: #f7f7f7;
        }

        .color-2 {
            background-color: #2e2e2e;
        }

        .color-3 {
            background-image: linear-gradient(to right, #fff, #f4f8fb);
        }

        .form-control {
            width: 300px;
            height: 50px;
            margin-top: 20px;
        }

        .form-control-1 {
            width: 300px;
            height: 150px;
            margin-top: 20px;
        }

        .m-btn {
            width: 100px;
            height: 50px;
            margin-left: 110px;
        }

        .demo {
            font-size: 30px;
            width: 500px;
            height: 300px;
            background-color: yellow;
            /* margin: 50% auto;
            margin-top: -250px; */
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 999;
            margin-left: -250px;
            margin-top: -100px;
            text-align: center;
            line-height: 300px;
            display: none;
        }

        .sumbit {
            display: block;
            width: 110px;
            height: 48px;
            font-size: 20px;
            line-height: 48px;
            color: #000;
            text-align: center;
            background-color: #ffc32b;
            border: 1px solid #ffc32b;
            margin-top: 20px;
            margin-left: 20px;
            text-decoration: none;
        }

        .a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="header">
            <a href="../pages/Neast163.html">
                <img src="../images/logo.png" alt="" class="logo"></a>
            <div class="h-container">
                <div class="hc-c">
                    <a href="" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img01.svg" alt=""> 个人中心
                    </a>
                    <a href="../pages/Neaste163.html" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img02.svg" alt=""> 退出登录
                    </a>
                    <a href="../pages/NeastShopping.html">
                        <img class="h-c-img" src="../images/img03.svg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="box color-2">
        <div class="header-nav">
            <p><a href="../pages/Neast163.html" style="color: #fff;text-decoration:none;">首页</a></p>
            <p><a href="../pages/inde.html" style="color: #fff;text-decoration:none;">关于</a></p>
            <p><a href="../pages/faqa.html" style="color: #fff;text-decoration:none;">FAQ</a></p>
            <p><a href="../pages/NeasteAftershop.html" style="color: #fff;text-decoration:none;">售后</a></p>
            <p><a href="../pages/sugges.html " style="color: #fff;text-decoration:none;">联系</a></p>
        </div>
    </div>

    <div class="box color-3">
        <div class="container">
            <div class="cc-left">
                <div class="header-tabs">
                    首页 / 留言
                </div>
                <div class="ccl-title">
                    在线留言
                    <p class="b-border"></p>
                </div>
                <div class="cclt-con">
                    <div class="con-1">
                        以任何方式进入起飞页网站即表示您同意自己已经与起飞页订立本条款， 且您将受本条款的条件约束。条款的解释权归起飞页所有。
                    </div>
                    <div class="form">
                        <div class="m-container">
                            <div class="form-group">
                                <label for="username">用户:</label>
                                <input type="text" class="form-control" value="" name="username" id="username"
                                    placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱:</label>
                                <input type="email" class="form-control" value="" name="email" id="email"
                                    placeholder="请输入邮箱号">
                            </div>
                            <div class="form-group">
                                <label for="contant">内容:</label>
                                <input type="contant" class="form-control-1" value="" name="contant" id="contant"
                                    placeholder="请输入内容">
                            </div>
                            <button type="submit" class="btn btn-default m-btn" onclick="sumbitt()">提交</button>
                            <!-- <div class="sumbit">提交</div> -->
                            <div class="demo">提交成功</div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
            <div class="cc-right">
                <img src="../images/img04.png" alt="">
            </div>
        </div>
    </div>
    <div class="box color-1">
        <div class="footer">
            <div class="footer-1">
                <div class="f-top">
                    <p class="f-title">
                        Contact
                    </p>
                    <p class="f-content">
                        地址：江苏省苏州市工业园区中新大道西加成大厦
                    </p>
                </div>
                <div class="f-bottom">
                    <p class="f-title">
                        +86 123 1234 1234
                    </p>
                    <p class="f-content">
                        邮箱:qifeiye@admin.com
                    </p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Quick Links
                </p>
                <div class="f-content">
                    <p>常见问题</p>
                    <p>测评中心</p>
                    <p>保修政策</p>
                    <p>售后服务</p>
                    <p>售后服务</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Products
                </p>
                <div class="f-content">
                    <p>充电</p>
                    <p>手机</p>
                    <p>生活</p>
                    <p>配件</p>
                    <p>音乐</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Feedback
                </p>
                <div class="f-content f-content2">
                    <textarea placeholder="内容" name="" id="idea" cols="50" rows="5"></textarea>
                    <!-- <button type="submit" class="btn btn-default m-btn">提交</button> -->
                    <button onclick="submit()">提交</button>

                </div>
            </div>
        </div>
    </div>

    <script src="../public/js/index.js">
    </script>
</body>

</html>